<!DOCTYPE HTML>
<html>
<head>
<title>Single</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Gourmet Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--start-smoth-scrolling-->
<!--webfonts-->
	<link href='http://fonts.useso.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.useso.com/css?family=Niconne' rel='stylesheet' type='text/css'>
<!--webfonts-->	
<link href="css/component.css" rel="stylesheet" type="text/css"  />
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body class="cbp-spmenu-push">
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-30027142-1', 'w3layouts.com');
  ga('send', 'pageview');
</script>

<!--header-->
	<div class="header-section2">
			<div class="container">
				<div class="header-top">
					<div class="top-nav">
						<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
							<h3>Menu</h3>
							<ul>
								<li><a href="myindex.html">Home</a></li>
								<li class="menu">Menu</li>
									<ul class="cl-effect-1">
										<li><a href="menu.html">Menu1</a></li>                                             
										<li><a href="menu.html">Menu2</a></li>
										<li><a href="menu.html">Menu3</a></li> 
										<li><a href="menu.html">Menu4</a></li>  
									</ul>
									<!-- script-for-menu -->
									 <script>
									   $( "li.menu" ).click(function() {
										 $( "ul.cl-effect-1" ).slideToggle( 300, function() {
										 // Animation complete.
										  });
										 });
									</script>
								<li><a href="events.html">Events</a></li>
								<li><a href="error/404.html">Gallery</a></li>
								<li><a href="mail.html">Mail Us</a></li>
							</ul>
						</nav>
						<div class="main buttonset">	
								<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
								<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
								<!--<span class="menu"></span>-->
						</div>
						<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
						<script src="js/classie.js"></script>
						<script>
						var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
						showRightPush = document.getElementById( 'showRightPush' ),
						body = document.body;

						showRightPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toleft' );
							classie.toggle( menuRight, 'cbp-spmenu-open' );
							disableOther( 'showRightPush' );
						};

						function disableOther( button ) {
							if( button !== 'showRightPush' ) {
								classie.toggle( showRightPush, 'disabled' );
							}
						}
					 </script>
					</div>
					<div class="header-logo">
						<a href="myindex.html"><img src="images/logo.png" alt="" /></a>
					</div>
					<div class="search-form">
						<form>
							<input type="text" value="Search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';}" required="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
<!--/header-->
		<!-- Blog -->
		<div class="blog">
			<div class="container">
				<div class="blog-content">
					<div class="container">
					<div class="blog-content-left">
						<div class="blog-articals">
							<div class="blog-artical">
							<div class="blog-artical-info">
								<ul class="product-head">
									<li><a href="index.html">首页</a> <span>::</span></li>
									<li class="active-page">single</li>
									<div class="clear"> </div>
								</ul>
							<div class="row1">
								<div class="blog-artical-info-head single-head">

									<h2>{{itemLimit.title}}  <span style="color: #DB2927;font-size: 24px">￥{{itemLimit.price}}</span></h2>
<!--									<ul>-->
<!--										<li><span> </span>by <a href="#">John Deo</a></li>-->
<!--										<li><span class="tag"> </span><a href="#">Lorem</a>,<a href="#">Ipsum</a>,<a href="#">printer</a>,<a href="#">unknown</a></li>-->
<!--										<div class="clearfix"> </div>-->
<!--									</ul>-->
								</div>
								<div class="blog-artical-info-img single-head-img">
									 <img :src="itemLimit.images" alt="image" style="height: 300px;width: 500px">
								</div>
								
								<div class="blog-artical-info-text">
									<p>{{itemLimit.sellPoint}}</p>
									<p>{{itemLimit.sellPoint}}</p>
									<span v-html="itemDesc.itemDesc">{{itemDesc.itemDesc}}}}</span>
								</div>
							</div>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="reply">
								<h4>请给出您的建议</h4>
							<div class="advice">
							<input type="text" value="姓名" v-model="username" required name="username" autocomplete="off"/>
<!--								<input type="text" value="邮箱" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>-->
								<textarea v-model="textdata" placeholder="请输入您的建议"></textarea>
								<input type="submit" value="提交" @click="advice()"/>
							</div>
						</div>
							<div class="comments">
								<h4>评论区</h4>
								<div class="myComments">
								<div class="comments-main" v-for="obj in comments">
									<div class="col-md-2 cmts-main-left">
										<img src="images/t3.jpg" alt="">
									</div>
									<div class="col-md-10 cmts-main-right" >
										<h5 style="color: #DB2927">{{obj.userName}}</h5>
										<p>{{obj.content}}</p>
										<div class="cmts">
											<div class="col-md-6 cmnts-left">
												<p>时间:{{obj.createTime}}</p>
											</div>
											<div class="col-md-6 cmnts-right">
												<a href="#">回复</a>
											</div>
											<div class="clearfix"></div>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
								</div>
							</div>
					</div>
					
					<!--start-blog-pagenate-->
				<div class="blog-pagenat">
					<ul class="dc_pagination dc_paginationA dc_paginationA06">
					  <li><a href="#" class="current">上一页</a></li>
					  <li><a href="#">1</a></li>
					  <li><a href="#">2</a></li>
					  <li><a href="#">3</a></li>
					  <li><a href="#">4</a></li>
					  <li><a href="#">5</a></li>
					  <li><a href="#">...</a></li>
					  <li><a href="#">19</a></li>
					  <li><a href="#">20</a></li>
					  <li><a href="#" class="current">下一页</a></li>
		       		</ul>
				</div>
				<!--//End-blog-pagenate-->
					</div>
					<div class="blog-content-right">
						<div class="b-search">
							<form>
								<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
								<input type="submit" value="">
							</form>
						</div>
						<!--start-twitter-weight-->
						<div class="Archives">
							<h3>历史好评</h3>
							<div class="list styled arrow-list2">
								<ul>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.1---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.2---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.3---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.4---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.5---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.6---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.7---</a></li>
									<li><a href="#"><img src="images/ar.png" alt="">---2021.8---</a></li>
								</ul>
							</div>

							<!-- //End-tag-weight-->
						</div>
						<div class="categories">
							<div class="findCate">
								 		<h3>本店其他美食</h3>
								 		<div class="list styled arrow-list2">
											<ul v-for="title in findCate">
												<li><a href="#"><img src="images/ar.png" alt="">{{title.title}}</a></li>
											</ul>
										</div>

						<!-- //End-tag-weight-->

<!--						<div class="myComments1">-->
<!--						<div class="admin" v-for="obj in comments">-->
<!--								<div class="admin-main" >-->
<!--									<h4><a  href="#">{{obj.userName}}</a></h4>-->
<!--									<div class="col-md-4 admin-img">-->
<!--										<img src="images/avatar.png" title="评论人" />-->
<!--									</div>-->
<!--									<div class="col-md-8 admin-text">-->
<!--										<p>{{obj.content}}</p>-->
<!--									</div>-->
<!--									<div class="clearfix"> </div>-->
<!--								</div>-->
<!--								-->
<!--							</div>-->

<!--					</div>-->

							<div class="admin" v-for="obj in findCate">
								<div class="admin-main" >
									<h4><a  href="#">{{obj.title}} <span style="color: #DB2927;font-size: 12px">￥{{obj.price}}</span></a></h4>

									<div class="col-md-4 admin-img">
										<img :src="obj.images" title="商品图" height="80px" width="80px"/>
									</div>
									<div class="col-md-8 admin-text">
										<p>{{obj.sellPoint}}</p>
									</div>
									<div class="clearfix"> </div>
								</div>

							</div>

						</div>
						</div>
				</div>
			</div>
		</div>
		<!-- /Blog -->
	</div>
<!--/start-footer-->                                                             
		<!--/start-footer-->
			<div class="footer-section">
				<div class="container">
					<div class="footer-grids">
						<div class="col-md-3 footer-grid bottom-nav">
							<h3>跳转页面</h3>
							<ul>
								<li><a href="index.html">主页</a></li>
								<li><a href="menu.html">菜单</a></li>
								<li><a href="events.html">消息</a></li>
								<li><a href="error/404.html">展示</a></li>
								<li><a href="mail.html">联系我们</a></li>
								<div class="clearfix"> </div>
							</ul>
						</div>
						<div class="col-md-3 footer-grid category">
							<h3>作者信息</h3>
							<ul>
								<li><a href="#">作者:DQH,RXD</a> </li>
								<li><a href="#">完成时间:2022/3/29/12:41:58</a>  </li>
								<li><a href="#">学院:重庆三峡学院</a> </li>
								<li><a href="#">地址:重庆</a> </li>
								<div class="clearfix"> </div>
							</ul>
						</div>
						<div class="col-md-3 footer-grid brands">
							<h3>项目信息 </h3>
							<ul>
								<li><a href="#">名字:一点餐</a>  </li>
								<li><a href="#">用户端</a> </li>
								<li><a href="#">创建时间:2021年9月21日11:56:54</a> </li>
								<li><a href="#">完成时间:2022年4月21日11:55:52</a> </li>

								<div class="clearfix"></div>
							</ul>
						</div>
						<div class="col-md-3 footer-grid contact-list">
							<h3>电话咨询</h3>
							<ul>
								<li>18225497037</li>
								<li>18225497037</li>
								<div class="clearfix"> </div>
							</ul>

						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		<!--//End-foote-->
		<div class="copy-right-section">
				<div class="container">
					<div class="col-md-6 copy-right">
						<p>---------2022年4月21日12:45:27----------------<a target="_blank" href="http://sc.chinaz.com/moban/">联系我们</a></p>
					</div>
					<div class="col-md-6 social-icons">
						<ul class="soc_icons2">
											<li><a href="#"><img src="images/QQ方.png" alt="" width="62px"></a></li>
											<li><a href="#"><img src="images/微信.png" alt="" width="44px"></a></li>
											<li><a href="#"><img src="images/twitter.png" alt="" width="49px"></a></li>
											<div class="clearfix"> </div>
										</ul>

					</div>
				</div>
		</div>
</div>
</body>

<script>

	let  details = new Vue({
		el:".row1",
		data:{
			itemLimit:'',
			itemDesc:'',
			id:''
		},
		created:function () {
			let str = location.href; //获取到整个地址
			let num = str.indexOf("?")
			str = str.substr(num + 1);


			axios.get("/index/recommendDetails/"+str).then(function (response) {
				details.itemLimit = response.data;
				details.id = str;
				details.itemDesc = details.itemLimit.itemDesc;

					details.itemLimit.price = details.itemLimit.price/100;
			})
		},
	})

	let vm = new Vue({
		el: '.advice',
		data: {
			textdata:'',
			username:'',
			username1:'',
			comments:{
				id:'',
				type:'',
				ownerId:'',
				userId:'',
				userName:'',
				itemcatId:'',
				likeNum:'',
				content:'',
				createTime:''
			}
		},
		methods: {
			advice:function () {

				vm.comments.content = vm.textdata;
				vm.comments.itemcatId = details.id;
				vm.comments.userName = vm.username1;
				let data = vm.comments;
				axios.post("/single/insertCom",data).then(function (response) {

				})
			}
		}
	})

	// 取出cookie里面保存的用户名和密码
	let cookies = document.cookie.split(";")
	for (let cookie of cookies) {
		let arr = cookie.split("=");
		let name = arr[0]
		let value = arr[1]
		if (name.trim()=="username"){
			vm.username = " 姓名: "+value;
			vm.username1 = value;
		}
	}

	let comment = new Vue({
		el:".myComments",
		data:{
			comments:[]
		},
		created:function () {
			let str = location.href; //获取到整个地址
			let num = str.indexOf("?")
			str = str.substr(num + 1);
			axios.get("/single/findCommentsList/"+str).then(function (response) {
				comment.comments = response.data;

			})
		},
	})

	let commentDemo = new Vue({
		el: ".myComments1",
		data: {
			comments: []
		},
		created: function () {
			let str = location.href; //获取到整个地址
			let num = str.indexOf("?")
			str = str.substr(num + 1);
			axios.get("/single/findCommentsList/" + str).then(function (response) {
				commentDemo.comments = response.data;
			})
		}
	})

	let findCate = new Vue({
		el: ".findCate",
		data: {
			findCate: []
		},
		created: function () {
			let str = location.href; //获取到整个地址
			let num = str.indexOf("?")
			str = str.substr(num + 1);
			axios.get("/single/findCate/" + str).then(function (response) {
				findCate.findCate = response.data;
				for (let i = 0; i <findCate.findCate.length ; i++) {
					findCate.findCate[i].price = findCate.findCate[i].price/100;
				}
				console.log(findCate.findCate)
			})
		}
	})



</script>
</html>